<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/vue.global.js"></script>
</head>
<body>
<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
<script>
const app = {
  data() {
    return {
      // seen: true
      seen: false
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>
<br>
<br>
<div id="app2">
  <ol>
    <li v-for="site in sites">
      {{ site.text }}
    </li>
  </ol>
</div>
<script>
    const app2 ={
        data(){
            return{
                sites:[
                    {text:'hello'},
                    {text:'java'},
                    {text:'vba'}
                ]
            }
        }
    }

    Vue.createApp(app2).mount('#app2');
</script>
<br>
<br>
<div id="app3">
    <!-- <p><a v-bind:href="url">菜鸟教程</a></p> -->
    <p><a :href="url">菜鸟教程</a></p>
</div>
<script>
const app3 = {
  data() {
    return {
      url: 'https://www.baidu.com'
    }
  }
}
 
Vue.createApp(app3).mount('#app3')
</script>
<br>
<br>
<div id="app4">
    <p>{{ message }}</p>
    <input v-model="message"/>
    <br>
    <input v-model="message"/>
</div>
<script type="text/javascript">
    const app4 = {
      data() {
        return {
          message: 'Runoob!'
        }
      }
    }
    Vue.createApp(app4).mount('#app4')
</script>
<br>
<br>
<div id="app5">
    <p>{{ message }}</p>
    <!-- <button v-on:click="reverseMessage">反转字符串</button> -->
    <button @click="reverseMessage">反转字符串</button>
</div>
<script type="text/javascript">
    const app5 = {
      data() {
        return {
          message: 'Runoob!'
        }
      },
      methods: {
        reverseMessage() {
          this.message = this.message
            .split('')
            .reverse()
            .join('')
        }
      }
    }
    Vue.createApp(app5).mount('#app5')
</script>
</body>
</html>